<template>
    <div class="checkAndReplaceSetList">
        <my-header
        class="page_header"
        ref="header"
        :isBack="true"
        :ewm="showFilterDialog?false:true" 
        :filter="showFilterDialog?false:true"
        :backText="showFilterDialog ? '点巡检筛选' : (isCheck ? '点巡检设置' : '更换设置')"
        :is_Level_three_page="true"
        :hadInput="hadInput"
        @filterFn="goFilter" 
        @backFn="back"
        @saoMa="scanAdd"
        @getIsFilterBackHome="getIsFilterBackHome"
        ></my-header>

        <transition name="slide">
            <div class="filter_dialog" v-if="showFilterDialog" :style="{top: headerHeight + 'px'}">
                <check-filter
                :index="index"
                :departmentId="departmentId"
                :offsetTop="headerHeight"
                :isFilterBackHome="isFilterBackHome"
                @initHadInput="initHadInput"
                @coloseFilterDialog="coloseFilterDialog"
                @changeFilterCondition="changeFilterCondition"
                @againResetMeScrollChild="againResetMeScroll"
                 ></check-filter>
            </div>
        </transition>
        <me-scroll ref="mescroll" class="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
            <loading :inline="false" :size="32" tip="加载中..." :reload="reload" @reloadFn="upCallback"  v-if="showRefresh" />
            <ul>
                <li v-for="(item, i) in listData" :key="i">
                    <div class="list_item">
                        <div class="desc_box">
                            <div class="item_title">
                                <p class="title">{{item.type === 1?('部门：'+item.departmentName):item.type === 2 ? ('设备：'+item.deviceName) : item.type === 3 ?('部件：'+item.componentName):''}}</p>
                                <p class="status" :class="item.configStatus == 1?'': 'no_start'">{{item.configStatusName}}</p>
                            </div>
                            <p class="their" v-if="item.type === 3">所属设备：{{item.deviceName}}</p>
                            <p class="time" :class="item.configStatus == 1?'colorActive': ''" v-if="item.lastOperateTime">{{item.configStatus == 1?'执行时间':'最后执行时间'}}：{{item.lastOperateTime | formaDateHms}}</p>
                        </div>
                        <div class="bottom_panel" v-if="switchBottom">
                            <p class="person">操作人：<span v-for="(items,index) in item.leaderList" :key="index" ><span v-if="index<2"><span v-if="index!==0">,</span>{{items.name}}</span></span></p>
                            <p class="period">周期：
                                {{item.cycle}}
                                <span>{{item.unitName}}</span>
                            </p>
                        </div>
                        <div class="bottom_panel" v-else>
                            <p class="person">操作人：{{item.operatorName}}</p>
                            <p class="period">周期：
                                {{item.maintainTime}}
                                <span v-if="item.maintainTimeUnit =='0'">小时</span>
                                <span v-if="item.maintainTimeUnit =='1'">天</span>
                                <span v-if="item.maintainTimeUnit =='2'">周</span>
                                <span v-if="item.maintainTimeUnit =='3'">月</span>
                                <span v-if="item.maintainTimeUnit =='4'">年</span>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="mescroll-empty" v-if="showEmpty">
                <img class="empty-icon" src="/static/img/zwlr-icon.png">
                <p class="empty-tip">暂无内容</p>
            </div>
        </me-scroll>
    </div>
</template>

<script>
import myHeader from '@/components/common/header';
import MeScroll from 'mescroll.js/mescroll.vue'
import checkFilter from '@/components/common/check_filter'
import loading from '@/components/common/loading'
export default {
    components: {
        myHeader,
        MeScroll,
        checkFilter,
        loading
    },
    computed: {
        index() {
            return parseInt(this.$route.query.index)
        },
        departmentId() {
             return parseInt(this.$route.query.departmentId)
        },
        isCheck() {
            return this.$route.query.isCheck
        },
        switchBottom() {
            if (!!!(this.index)) {
                if (this.index == 0) {
                    return true
                } else {
                   return false 
                }
            }
        }
    },
    data() {
        return{
            mescroll: null,
            headerHeight: 0,
            hadInput: false,
            showFilterDialog: false,
            isFilterBackHome: false,
            reload: false,
            showRefresh: false,
            mescrollDown:{
                use: true,
                warpClass: 'my-downwarp-normal',
                htmlContent: '<p class="downwarp-progress mescroll-rotate"></p><p class="downwarp-tip">加载中...</p>',
                onMoving: this.onMoving,
                afterLoading: this.showTotalNum,
                offset: 60,
                textOutOffset: '松开刷新'
            }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: { // 上拉加载的配置.
                auto: false,
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                //以下是一些常用的配置,当然不写也可以的.
                isBounce: false,
                page: {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    size: 20 //每页数据条数,默认10
                },
                htmlNodata: '<p class="myUpwarpNodata">没有更多了</p>',
                noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
                        //避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                        //这就是为什么无更多数据有时候不显示的原因
                toTop: {
                    //回到顶部按钮
                    //src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
                    //offset: 1000 //列表滚动1000px才显示回到顶部按钮
                },
                empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                    // warpId: "list_content", //父布局的id (1.3.5版本支持传入dom元素)
                    // icon: "./static/img/zwlr-icon.png", //图标,默认null,支持网络图
                    // tip: "暂无内容" //提示
                },
                // warpId: 'upRefreshWarp',
                warpClass: 'myScrollUpRefreshWarp',
                htmlLoading: '<p class="upRefreshProgress refreshRotate"></p> <p class="refresh-tip">加载中...</p>'
            },
            listData: [],
            filterCondition: {
                checkLeaderName: '',
                deviceComponentName: '',
                deviceComponentCode: '',
                checkTypeList: [],
                statusList: []
            },
            hadDown: false,
            showEmpty: false
        }
    },
    mounted() {
        this.headerHeight = this.$refs.header.$el.offsetHeight
    },
    methods: {
        back() {
            if (this.showFilterDialog) {
                this.coloseFilterDialog()
            } else {
                history.back(-1)
            }
        },
        goFilter() {
            this.showFilterDialog = true
        },
        getIsFilterBackHome(status) {
            this.isFilterBackHome = status
        },
        initHadInput(status) {
            this.hadInput = status
        },
        coloseFilterDialog() {
            this.showFilterDialog = false
            this.hadInput = false
        },
        changeFilterCondition(obj) {
            this.filterCondition = obj
        },
        againResetMeScroll() {
            this.resetMeScroll()
        },
        resetMeScroll() {
            // 重置列表数据及页码
            this.mescrollUp.page.num = 0
            this.listData = []
            let upEmpty = document.querySelector('.myScrollUpRefreshWarp')
            if (upEmpty) {
                upEmpty.style.display = 'none'
            }
            this.mescroll.resetUpScroll(false);
            if (document.querySelector('.total_num_view')) {
                document.querySelector('.total_num_view').style.display = 'none'
            }
            if (document.querySelector('.downwarp-content')) {
                document.querySelector('.downwarp-content').style.display = 'block'
            }
        },
        onMoving(mescroll, rate, downHight ) {
            this.hadDown = true
            let totalBox = document.querySelector('.total_num_view')
            if (downHight > 0 && totalBox) {
                document.querySelector('.downwarp-content').style.display = 'block'
                totalBox.style.display = 'none'
            }
            if (mescroll.downProgressDom) {
                mescroll.downProgressDom.classList.remove('mescroll-rotate');

                var progress = 360 * rate;
                mescroll.downProgressDom.style.webkitTransform = 'rotate(' + progress + 'deg)';
                mescroll.downProgressDom.style.transform = 'rotate(' + progress + 'deg)';
            }
        },
        showTotalNum(mescroll) {
            document.querySelector('.downwarp-content').style.display = 'none'
            let warp = document.getElementsByClassName('my-downwarp-normal')[0]
            let totalBox = document.querySelector('.total_num_view')
            let p = document.createElement('p')
            p.style.marginTop = '15px'
            p.setAttribute('class','total_num_view');
            if (this.isEquals) {
                p.innerHTML =  `已是最新信息`
            } else {
                p.innerHTML =  `已为加载${this.listData.length}条信息`
            }
            if (totalBox == null) {
                warp.appendChild(p)
            } else {
                if (this.isEquals) {
                    totalBox.innerHTML =  `已是最新信息`
                } else {
                    totalBox.innerHTML = `已为加载${this.listData.length}条信息`
                }
                totalBox.style.display = 'block'
            }
            return 1000
        },
        mescrollInit (mescroll) {
            this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollChildInit可以不用配置
            this.mescroll.resetUpScroll(false);
        },
        switchServerUrl(index) {
            if (index == 0) {
                return this.$API.checkSetRecordList
            } else {
                return this.$API.replaceSetRecordList
            }
        },
        getSetList(page, mescroll, obj) {
             if (!this.hadDown) {
                this.showRefresh = true
            }
            this.showEmpty = false
            let serverUrl = this.switchServerUrl(this.index)
            this.$http(serverUrl, obj, true).then((res) => {
                this.showRefresh = false
                this.reload = false
                // 如果是第一页需手动置空列表
                if (page.num === 1) this.listData = []
                this.listData = this.listData.concat(res.content)
                if (this.listData.length == 0) {
                    this.showEmpty = true
                }
                this.$nextTick(() => {
                      // mescroll.endSuccess(res.content.length, !(page.num == res.totalPages))
                      this.mescroll.endByPage(res.content.length, res.totalPages)
			        })
            }).catch((e) => {
                // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    if (e) {
                        this.showRefresh = true
                        this.reload = true
                    }
                    this.mescroll.endErr()
                })
        },
        upCallback(page, mescroll) {
                let pageObj = {
                    departmentId:this.departmentId,
                    pageNum: page.num,
                    pageSize: page.size
                }
                
                let obj = Object.assign(pageObj, this.filterCondition)
                console.log(obj)
               setTimeout(() => { // 
                   this.getSetList(page, mescroll, obj, this.index)
               }, 0)
        },
        //扫码添加
        scanAdd: function () {
            let strUrl = '';
            wx.ready(()=>{
                wx.scanQRCode({ // 微信扫一扫接口
                desc: 'scanQRCode desc',
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                    //扫码之后返回设备信息，获取设备id，跳转对应页面
                    strUrl = res.resultStr;
                    let name="state";
                    let reg = new RegExp('(^|&)' + name + '=([^&]*)(#|$)', 'i');
                    let r = strUrl.substr(1).match(reg);
                    let id = '';
                    if (r != null) {
                    id =  r[2].split("#")[0];
                    }
                    if(strUrl.indexOf(location.hostname) != -1){
                        window.location.href = _this.url + '/#/operaionManage/spotCheck/componentCheck?deviceId=' + id;
                    }else{
                       this.$commom.alert('请输入正确的手机号码');;
                    }

                }
                })
            }).catch((err)=>{
                console.log("err:===>",err)
            });
        }
    },
}
</script>

<style lang="less" scoped>
    .checkAndReplaceSetList{
        background: #22233F;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-y: auto;
        .page_header{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 99;
        }
        .mescroll{
            position: fixed;
            top: 45px;
            bottom: 0;
            height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
            ul{
                padding: 8px 16px 0;
                overflow: hidden;
                li{
                    margin-top: 12px;
                    background: #292A4D;
                    border-radius: 4px;
                    .list_item{
                        .desc_box{
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            padding: 8px;
                            height: 80px;
                            border-bottom: 1px solid rgba(255,255,255,0.1);
                            .item_title{
                                display: flex;
                                .title{
                                    flex: 1;
                                    font-size: 17px;
                                    color: #fff;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                                .status{
                                    font-size: 15px;
                                    color: #456DE6;
                                    &.no_start{
                                        color: rgba(255,255,255,0.6)
                                    }
                                }
                            }
                            .their{
                                font-size: 14px;
                                color: rgba(255,255,255,0.6)  
                            }
                            .time{
                                font-size: 14px;
                                color: rgba(255,255,255,0.6);
                                &.colorActive{
                                    color: #456DE6;
                                }
                            }
                        }
                        .bottom_panel{
                            display: flex;
                            padding: 8px;
                            box-sizing: border-box;
                            font-size: 15px;
                            color: rgba(255,255,255,0.6);
                            .person{
                                flex: 1;
                                text-align: left;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                            .period{
                                flex: 1;
                                text-align: right;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }
            .mescroll-empty{
                padding-top: 50px;
                .empty-icon{
                    width: 64px;
                    height: 64px;
                    margin-left: 22px;
                }
                .empty-tip{
                    color: #4F77C0;
                }
            }
        }
    }
    .slide-enter-active, .slide-leave-active{
        transition: all 0.5s ease;
    }
    .slide-enter,.slide-leave-to{
    transform: translateY(-800px);
    opacity: 0;
    }
</style>

<style lang="less">
    .checkAndReplaceSetList{
        .filter_dialog{
            position: fixed;
            width: 100%;
            left: 0;
            z-index: 4999;
        }
        .refresh-warp{
            .refresh-progress{
                border-width: 2px!important;
            }
        }
    }
</style>
